<template>
  <div class="shop">
    <NavBar></NavBar>
    <van-search v-model="search" placeholder="Search" />
    <div class="goods">
      <div class="goodsHead">
        <div class="title">Categories</div>
        <div class="more">See All</div>
      </div>
      <div class="goodsContent">
        <div class="goodsContent-item" v-for="(item, index) in categoryList" :key="index">
          <van-image round width="95" height="95" :src="item.imgUrl" />
          <div class="goodsContent-item-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="goods">
      <div class="goodsHead">
        <div class="title">Popular Deals</div>
        <div class="more">See All</div>
      </div>
      <div class="goodsContent">
        <PopularList :product="popularList"></PopularList>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NavBar, TabBar, PopularList } from "../../components"
const search = ref('')
interface Category {
  id: string;
  name: string;
  imgUrl: string;
}
interface Popular {
  id: string;
  name: string;
  imgUrl: string;
  weight: string;
  price: string;
}
let categoryList: Array<Category> = [
  {
    id: "1",
    name: "Fruits",
    imgUrl: '../../src/assets/img/categories_01.png'
  },
  {
    id: "2",
    name: "Vegtables",
    imgUrl: '../../src/assets/img/categories_02.png'
  },
  {
    id: "3",
    name: "Meat",
    imgUrl: '../../src/assets/img/categories_03.png'
  },
  {
    id: "4",
    name: "Fish",
    imgUrl: '../../src/assets/img/categories_04.png'
  },
  {
    id: "5",
    name: "Shrimp",
    imgUrl: '../../src/assets/img/categories_05.png'
  },
  {
    id: "6",
    name: "Juice",
    imgUrl: '../../src/assets/img/categories_06.png'
  },
  {
    id: "7",
    name: "EGG & Milk",
    imgUrl: '../../src/assets/img/categories_07.png'
  },
  {
    id: "8",
    name: "Ice Cream",
    imgUrl: '../../src/assets/img/categories_08.png'
  },
  {
    id: "9",
    name: "Cake",
    imgUrl: '../../src/assets/img/categories_09.png'
  },
  {
    id: "10",
    name: "Vin Rouge",
    imgUrl: '../../src/assets/img/categories_10.png'
  },
  {
    id: "11",
    name: "Liquid Soap",
    imgUrl: '../../src/assets/img/categories_11.png'
  },
]
let popularList: Array<Popular> = [
  {
    id: "1",
    name: "Red Apple",
    weight: "1kg,price",
    price: "4,99",
    imgUrl: "../../src/assets/img/fruite_01.png",
  },
  {
    id: "2",
    name: "Orginal Banana",
    weight: "1kg,price",
    price: "5,99",
    imgUrl: "../../src/assets/img/fruite_02.png",
  },
  {
    id: "3",
    name: "avocado",
    weight: "1kg,price",
    price: "4,99",
    imgUrl: "../../src/assets/img/fruite_03.png",
  },
  {
    id: "4",
    name: "Sashimi",
    weight: "1kg,price",
    price: "4,99",
    imgUrl: "../../src/assets/img/fruite_04.png",
  },
  {
    id: "5",
    name: "Strawberry",
    weight: "1kg,price",
    price: "4,99",
    imgUrl: "../../src/assets/img/fruite_05.png",
  },
  {
    id: "6",
    name: "Mango",
    weight: "1kg,price",
    price: "4,99",
    imgUrl: "../../src/assets/img/fruite_06.png",
  },
]
</script>
<style scoped lang="less">
.goods {
  overflow: hidden;
  display: block;
  margin-top: 18px;
  .goodsHead{
    display: flex;
    height: 58px;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .title {
      color: #6D3805;
      font-size: 22px;
      font-weight: bold;
    }
    .more {
      color:#FF5E00;
      font-size: 18px;
    }
  }
  .goodsContent {
    display: flex;
    margin-top: 10px;
    overflow-x: auto;
    .goodsContent-item {
      text-align: center;
      margin: 0 5px;
      .goodsContent-item-name {
        margin-top: 8px;
        font-size: 14px;
        color: #6d3805;
      }
    }
  }
}
</style>